/*
 * icenter page
**/
<template>
<div style="width:100%; height:100%; overflow:hidden;">
<div id="tmp-layer-box">
<div class="tmp-view-layer"></div>
<div class="promotion-code" id='promotion-box'>
  	<div class="hd"><img src="http://wz2.i2035.com/static/img/qrcode-hd.4b7a311.jpg" width="100%"></div>
    <div class="bd">
      <span class="avatar-img"><img :src="avatarImgUrl"></span>
      <div id="qr2"></div>
    </div>
    <div class="ft"><img src="http://wz2.i2035.com/static/img/qrcode-ft.72199fc.jpg" width="100%"></div>
</div>
</div>
<!-- <v-tab></v-tab> -->
<div class="mod-page-tit-re">
  <p>今日邀请好友获得 <span style="color:#ffa200;font-size:.16rem;"> {{promotion.invite_times*20}} </span>积分</p>
  <p><span style="color:#ffa200;">每天最多可获取1000积分</span></p>
  <router-link to="/records" class="score-info">查看积分明细</router-link>
  <!-- <p><router-link to="/records" class="btn-account-list">查看积分明细</router-link></p> -->
</div>
<!-- <div class="promotion-tit">
  <p>你共邀请了<span class="origin f-14">{{promotion.promotion_friend_count}}</span>名好友</p>
  <p>累计获得<span class="origin f-14">{{promotion.promotion_point}}</span>积分</p>
</div> -->
<div class="promotion-content">
  <div class="promotion-code" id='promotion-box-tmp'>
    <div class="hd"><img src="../../assets/imgs/icenter/qrcode-hd.jpg" width="100%"></div>
    <div class="bd">
      <span class="avatar-img"><img :src="avatarImgUrl"></span>
      <div id="qr1"></div>
      <!-- <vue-q-art :config="config" :downloadButton="downloadButton"></vue-q-art> -->
      <!-- <p class="promotion-txt">扫我为你的生活加点料</p> -->
    </div>
    <div class="ft"><img src="../../assets/imgs/icenter/qrcode-ft.jpg" width="100%"></div>
    <img src="" id="view-img">
  </div>
  <div class="tc">长按保存图片发送给好友</div>
  <div class="tc">好友成功关注可获得<span>20积分</span></div>
  <router-link to="/index" class="ui-btn">返回首页</router-link>
</div>
<div class="mod-footer-place"></div>
</div>
</template>
<script>
import { avatarUrl } from 'src/config/env'
import vTab from 'components/common/tab'
import {getUserPromotion} from '../../service/getData'
import {cookie} from 'src/config/utils'
import {mapState, mapMutations} from 'vuex'
// import VueQArt from 'vue-qart'
// import QArt from 'qartjs'
import qrCode from 'qrcode-npm'
export default {
  data () {
    return {
      promotion: '',
      config: {
        value: '',
        imagePath: './static/imgs/avatar.jpg',
        filter: 'color' // threshold
      },
      inviteTimes: 0,
      downloadButton: false
    }
  },
  computed: {
    ...mapState([
      'I9RIA'
    ])
  },
  components: {
    'v-tab': vTab
  },
  mounted () {
    if (this.I9RIA && this.I9RIA.wxJsApiConf) {
      this.initData()
    }
    this.setShare()
  },
  methods: {
    ...mapMutations([
      'RECORD_SHARE_STATE' // 用户代言人状态
    ]),
    async initData () {
      this.RECORD_SHARE_STATE(true)
      cookie('shareState', 'shared')
      let tmpData = await getUserPromotion()
      if (tmpData.code !== 0) return
      this.promotion = tmpData.data
      this.config.value = tmpData.data.qrcode_url
      this.avatarImgUrl = avatarUrl + tmpData.data.avatar_location_url
      // const qart = new QArt(this.config)
      // qart.make(document.getElementById('qr'))
      var qr = qrCode.qrcode(6, 'M')
      qr.addData(this.config.value)
      qr.make()
      document.getElementById('qr1').innerHTML = qr.createImgTag(6).replace(':image/gif;', ':image/png;')
      document.getElementById('qr2').innerHTML = qr.createImgTag(6).replace(':image/gif;', ':image/png;')
      setTimeout(() => {
        window.html2canvas(document.getElementById('promotion-box'), {
          allowTaint: false,
          onrendered: function (canvas) {  // loadingend
            var base64 = canvas.toDataURL('image/jpg')
            document.getElementById('view-img').src = base64
            document.getElementById('tmp-layer-box').innerHTML = ''
          }
        })
      }, 200)
      // var qr = qrCode.QRCode(10, 'H')
      // qr.addData(this.config.value)
      // qr.make()
      //               document.getElementById('qr').innerHTML = qr.createImgTag(3);
      // this.getBase64(this.files[0], function (base64Img) {
      //   var regex = /data:(.*);base64,(.*)/gm
      //   var parts = regex.exec(base64Img)
      //   console.log(parts[0])
      //   // $('#image img').attr('src', imagePath);
      //   // makeQArt()
      // })
    },
    getBase64 (file, callback) {
      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function () {
        callback(reader.result)
      }
    },
    setShare () {
      this.I9RIA.shareConfig.title = '玩赚游戏分享测试'
      this.I9RIA.shareConfig.link = 'http://play8.beetobees.com/play/tpl_jumpjump/5MljBrxb/'
      console.log(this.I9RIA)
    }
  },
  watch: {
    I9RIA (res) {
      let val = res || {}
      if (val && val.wxJsApiConf) {
        this.initData()
      }
      if (val.code === 9999) {
        this.$router.push('/404')
      }
    }
  }
}
</script>
<style>
.promotion-tit{padding:.15rem; background:#fff; font-size:.12rem; line-height:.26rem; color:#333;}
.promotion-content{padding:.1rem .15rem;text-align:center;}
.promotion-code{position:relative; border-radius:.05rem; overflow:hidden;}
#promotion-box{position:absolute;  width:1920px;}
#view-img{position:absolute; left:0; bottom:0; width:100%; z-index:25; opacity:0;}
.promotion-code img{display:block; position:relative; z-index:10;}
.promotion-code .bd{position:relative; background:#fbd400 url(http://wz2.i2035.com/static/img/qrcode-bd.9bf1d60.jpg) no-repeat 50% 50%; background-size:cover; margin:-.2rem auto; padding:.2rem 0; text-align:center;}
/*.promotion-code .bd .i1,
.promotion-code .bd .i2{position:absolute; left:50%; top:50%; width:.1rem; height:.1rem; margin-top:-.05rem; display:block; border:.03rem solid #78abf5; border-radius:.05rem;}
.promotion-code .bd .i1{margin-left:-1.05rem;}
.promotion-code .bd .i2{margin-left:1rem; border-color:#f23d74;}*/
.promotion-code .bd div canvas,
.promotion-code .bd div img{display:inline-block; background:#fcdb2b; border:.015rem solid #fff; border-radius:.05rem; margin:0; padding:0; width:1.8rem; height:1.8rem;}
.promotion-code .ft{margin-top:-.25rem;}
.promotion-txt{font-size:.12rem; color:#a67f00;}
.avatar-img{position:absolute; left:50%; top:.85rem; z-index:20; margin-left:-.22rem;width:.5rem; height:.5rem; overflow:hidden; background:#fff; border-radius:.08rem;}
.avatar-img img{width:100%; height:100%; display:block; border:.02rem solid #fff; border-radius:.08rem;}

.tmp-view-layer{position:absolute; top:0; right:0; bottom:0; left:0; background:#efeff4; z-index:-90;}
#promotion-box{position:absolute; left:0; top:0; z-index:-100; width:1440px;}
#promotion-box .bd div img{display:inline-block; background:#fcdb2b; border:.015rem solid #fff; border-radius:.05rem; margin:0; padding:0; width:7.2rem; height:7.2rem;}
#promotion-box .avatar-img{position:absolute; left:50%; top:50%; z-index:20; margin-left:-1rem; margin-top:-1rem;width:2rem; height:2rem; overflow:hidden; background:#fff; border-radius:.32rem;}
#promotion-box .avatar-img img{width:100%; height:100%; display:block; border:.08rem solid #fff; border-radius:.32rem; overflow:hidden;}
.score-info{position:absolute;text-decoration: underline; top: 0.2rem; right: 0.2rem;}
.tc{color:#989388; font-size:14px; line-height:32px;}
.tc span{font-size:18px;color: #ffa200;}
.ui-btn{background-color: #ffa200; font-size: .14rem; height: .32rem; line-height: .32rem; border-radius: .16rem;position: relative;top:0.1rem;}
</style>
